$(document).ready(function(){
    
    var ViewModel = { n : ko.observable(0) };

    function data2HTML(array, level, linee){
        var lev = level || 0; var le = linee || "\n"; var toRet = "", status="";
        if (array.length<1 && lev===0){ return "<p> No groups !</p>"};

        for (var i=0, j=array.length; i<j; i++){
            if (lev===0){ toRet = "<ul class=\"groups\">"; } else {toRet = "<ul>";};
            switch(array[i].status){
                case 0: status = "inactive"; break;
                case 1: status = "active";   break;
                case 2: status = "blocked";  break;
                default:status = "active";   break;
            }
            toRet += "<li>"+le+
                    "<label class=\"checkbox-inline\"><input type=\"checkbox\" id=\"inlineCheckbox"+array[i].id+
                    "\" value=\"groupID_"+array[i].id+"\"></label>"+
                    "<a id=\""+array[i].id+"\" class=\""+status+
                    "_group\" href=\"\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Description: \n"+
                    array[i].description+"\n"+
                    "Created: "+array[i].date_created+"\n"+
                    "Status: "+status+"\">"+
                    array[i].name+"</a>"+le+
                    "</li>"+le;
            if (array[i].children.length>0){ toRet += data2HTML(array[i].children, ++lev); lev--; };
            toRet += "</ul>";
        };
        return toRet;
    };

    var countChecked = function(){
          var n = $(".groups .checkbox-inline input:checked").length;
          ViewModel.n(n);
          $(".panel-footer .checked_text").text((n===1 ? " is":" are")+" selected");
    };
    
    app.getDatafromServer({
            type: "GET",
            url: "groupsList2JSON/",
            cache: false,
            timeout: 20000
        }).done(function(data, textStatus, jqXHR){
            var ar = app.flatArray_2_nestedArray(data);
            if (ar.length<1){
                $(".groups_list").html("<p> No groups !</p>");
                return;
            };

            $(".groups_list").html(data2HTML(ar));

            $(".groups").delegate("a", "click", function(){
                var locat = window.location.toString().substring(0, window.location.toString().length)+"edit_group/id="+this.id;
                window.location = locat;
                return false;
            });
            $("#btn_add").on("click", function(event){
                var locat = window.location.toString().substring(0, window.location.toString().length)+"add_group/";
                window.location = locat;
                return false;
            });
            $("#btn_edit").on("click", function(event){
                    console.log("Edit button clicked, selected:");
            });
            $("#btn_delete").on("click", function(event){
                    var checked = $(".groups input:checkbox:checked").map(function(){
                      return $(this).val();
                    }).get(); 
                    console.log("Delete button clicked, selected:", checked);
            });
            $(".groups .checkbox-inline input[type=checkbox]").on("click", countChecked);

            countChecked();
            ko.applyBindings(ViewModel);

            $(".loading-indicator").css("display","none");
            $(".panel-body").css("display", "block");
        }).fail(function(jqXHR, textStatus, errorThrown){
            $(".loading-indicator").css("display","none");
            $(".error_msg").append(textStatus+": "+JSON.stringify(errorThrown));
            $(".error_msg").css("display", "block");
        });
});


